import { Button, HorizontalBox, VerticalBox, Slider, GridBox, GroupBox, TabWidget, Palette, Switch, LineEdit} from "std-widgets.slint";

struct ColorPalette {
    main: color,
    hover: color,
    press: color}

component ColorPicker inherits Rectangle {
    in-out property <[color]> color_list;
    in-out property <int> select_index;
    in-out property <length> gap: 5px;
    in-out property <image> title;
    in-out property <length> title_size: 16px;
    out property <length> cell_border_width: 2px;
    out property <length> cell_size: 30px;
    private property <int> column_n: Math.floor((self.width - gap) / (cell_size + gap));
    private property <int> row_n: Math.ceil(color_list.length / column_n);
    callback changed;
    height: title_size * 1.1 + row_n * (gap + cell_size) + gap;
    Image {
        x: 0;
        y: 0;
        source: title;
        height: title_size;
    }

    for item[index] in color_list: Rectangle {
        out property <int> index: index;
        in property <bool> is_select: index == select_index;
        private property <int> row_index: Math.floor(index / column_n);
        private property <int> column_index: Math.mod(index, column_n);
        height: cell_size;
        width: cell_size;
        background: item;
        border-color: is_select ? red : black;
        border-width: cell_border_width;
        x: (gap + cell_size) * column_index;
        y: (gap + cell_size) * row_index + title_size * 1.1;
        TouchArea {
            clicked => {
                root.select_index = parent.index;
                root.changed();
            }
        }
    }
}

component ImgLabelComponent inherits Rectangle {
    in-out property <image> title;
    in-out property <length> title_size: 16px;
    Image {
        x: 0;
        y: 0;
        source: title;
        height: title_size;
    }

    Rectangle {
        x: 0;
        y: title_size * 1.1;
        @children
    }
}

component TimeInput inherits Rectangle {
    in-out property <bool> enable:true;
    in-out property <length> size: 36px;
    out property <length> cell_wide: size * 2;
    in-out property <int> hour;
    in-out property <int> minute;
    in-out property <int> second;
    height: size + 4px;
    callback set_time;
    function data_check() {
        if hour_edit.text.to-float() > 99 {
            hour_edit.text = 99;
        }
        if minute_edit.text.to-float() > 59 {
            minute_edit.text = 59;
        }
        if second_edit.text.to-float() > 59 {
            second_edit.text = 59;
        }
        hour = hour_edit.text.to-float();
        minute = minute_edit.text.to-float();
        second = second_edit.text.to-float();
        set_time();
    }
    HorizontalLayout {
        alignment: center;
        hour_edit := LineEdit {
            enabled: enable;
            input-type: decimal;
            width: cell_wide;
            font-size: size;
            placeholder-text: 0;
            horizontal-alignment: right;
            text: hour;
            edited => {
                data_check();
            }
        }

        Text {
            text: ":";
            font-size: size;
            font-weight: 10;
        }

        minute_edit := LineEdit {
            enabled: enable;
            input-type: decimal;
            width: cell_wide;
            font-size: size;
            placeholder-text: 0;
            horizontal-alignment: right;
            text: minute;
            edited => {
                data_check();
            }
        }

        Text {
            text: ":";
            font-size: size;
            font-weight: 10;
        }

        second_edit := LineEdit {
            enabled: enable;
            input-type: decimal;
            width: cell_wide;
            font-size: size;
            placeholder-text: 0;
            horizontal-alignment: right;
            text: second;
            edited => {
                data_check();
            }
        }
    }
}

component AppWindow inherits Window {
    in-out property <string> time_string: "00:00:00";
    in-out property <bool> is_pause: true;
    in-out property <length> size: 36px;
    out property <[ColorPalette]> background_palette_list: [
        { main: #292929, hover: #3d3d3d, press: #1f1f1f },
        { main: #ffffff, hover: #f5f5f5, press: #e0e0e0 },
        { main: #6d2064, hover: #c239b3, press: #af33a1 },
        { main: #edbbe7, hover: #c239b3, press: #af33a1 },
        { main: #0b5a08, hover: #13a10e, press: #11910d },
        { main: #a7e3a5, hover: #13a10e, press: #11910d },
    ];
    in-out property <color> front_color: #000000;
    in-out property <color> background_color: #ffffff00;
    in-out property <color> background_color_hover;
    in-out property <color> background_color_press;
    in-out property <bool> is_open_setting: false;
    out property <[color]> front_color_list: [#292929, #ffffff, #edbbe7, #a7e3a5];
    in-out property <int> front_color_index: 0;
    out property <[color]> background_color_list: [#292929, #ffffff, #6d2064, #edbbe7, #0b5a08, #a7e3a5];
    in-out property <int> background_color_index: 1;
    in-out property <float> background_alpha: 0.0;
    in-out property <bool> is_count_down: false;
    in-out property <int> hour: 0;
    in-out property <int> minute: 0;
    in-out property <int> second: 0;
    callback pause;
    callback reset;
    callback exit;
    callback mouse_move(length, length);
    callback set_count_down(bool, int, int, int);
    always-on-top: true;
    no-frame: true;
    background: main-area.has-hover ? white : transparent;
    icon: @image-url("./resource/timer.svg");
    width: size * 4.9 + 240px;
    height: is_open_setting ? main_height() + 260px : main_height();
    pure function increase_alpha(alpha: float) -> float {
        alpha + (1 - alpha) * 0.3
    }
    pure function main_height() -> length {
        size * 1.5 <= 80px ? 80px : size * 1.5
    }
    function update_background_color() {
        background_color = background_palette_list[background_color_index].main.with-alpha(background_alpha);
        background_color_hover = background_palette_list[background_color_index].hover.with-alpha(increase_alpha(background_alpha));
        background_color_press = background_palette_list[background_color_index].press.with-alpha(increase_alpha(background_alpha));
    }
    init => {
        update_background_color();
    }
    main_area := TouchArea {
        moved => {
            root.mouse_move(self.mouse-x - self.pressed-x, self.mouse-y - self.pressed-y);
        }
        VerticalBox {
            alignment: start;
            HorizontalBox {
                VerticalLayout {
                    alignment: center;
                    Rectangle {
                        background: touch.pressed ? background_color_press : touch.has-hover ? background_color_hover : background_color;
                        height: size * 1.1;
                        HorizontalLayout {
                            alignment: center;
                            VerticalLayout {
                                alignment: center;
                                time_text := Text {
                                    color: front_color;
                                    font-size: size;
                                    font-weight: 600;
                                    text: time_string;
                                }
                            }

                            VerticalLayout {
                                alignment: center;
                                Image {
                                    colorize: front_color;
                                    source: is_pause ? @image-url("./resource/pauze.svg") : @image-url("./resource/play.svg");
                                    height: size * 0.5;
                                    width: size * 0.5;
                                }
                            }
                        }

                        touch := TouchArea {
                            moved => {
                                root.mouse_move(self.mouse-x - self.pressed-x, self.mouse-y - self.pressed-y);
                            }
                            clicked => {
                                root.is_pause = !root.is_pause;
                                root.pause();
                            }
                        }
                    }
                }

                VerticalLayout {
                    alignment: center;
                    Button {
                        icon: @image-url("./resource/reset.svg");
                        height: 50px;
                        width: 60px;
                        visible: main-area.has-hover;
                        clicked => {
                            root.is_pause = true;
                            root.reset();
                        }
                    }
                }

                VerticalLayout {
                    alignment: center;
                    Button {
                        icon: @image-url("./resource/setting.svg");
                        height: 50px;
                        width: 60px;
                        visible: main-area.has-hover;
                        clicked => {
                            root.is_open_setting = !root.is_open_setting;
                        }
                    }
                }

                VerticalLayout {
                    alignment: center;
                    Button {
                        icon: @image-url("./resource/exit.svg");
                        height: 50px;
                        width: 60px;
                        visible: main-area.has-hover;
                        clicked => {
                            root.exit();
                        }
                    }
                }
            }

            if is_open_setting && main_area.has-hover: Rectangle {
                height: 260px;
                VerticalLayout {
                    HorizontalBox {
                        ColorPicker {
                            title: @image-url("./resource/text_front_color.svg");
                            width: root.width / 2 - 20px;
                            color_list: root.front_color_list;
                            select_index: root.front_color_index;
                            changed => {
                                front_color = front_color_list[self.select_index];
                                front_color_index = self.select_index;
                            }
                        }

                        ColorPicker {
                            width: root.width / 2 - 20px;
                            title: @image-url("./resource/text_background_color.svg");
                            color_list: root.background_color_list;
                            select_index: root.background_color_index;
                            changed => {
                                root.background_color_index = self.select_index;
                                update_background_color();
                            }
                        }
                    }

                    HorizontalBox {
                        ImgLabelComponent {
                            height: self.title_size * 1.1 + 20px;
                            title: @image-url("./resource/text_size.svg");
                            Slider {
                                value: root.size / 1px;
                                maximum: 62;
                                minimum: 20;
                                width: root.width / 2 - 40px;
                                x: 0;
                                changed => {
                                    root.size = self.value * 1px;
                                }
                            }
                        }

                        ImgLabelComponent {
                            title: @image-url("./resource/text_alpha.svg");
                            height: self.title_size * 1.1 + 20px;
                            Slider {
                                value: root.background_alpha;
                                maximum: 1;
                                minimum: 0;
                                width: root.width / 2 - 40px;
                                x: 0;
                                changed => {
                                    root.background_alpha = self.value;
                                    update_background_color();
                                }
                            }
                        }
                    }

                    HorizontalBox {
                        alignment: start;
                        spacing: 10px;
                        VerticalLayout {
                            alignment: center;
                            ImgLabelComponent {
                                width: 50px;
                                title: @image-url("./resource/text_down.svg");
                                height: self.title_size + 20px;
                                Switch {
                                    x: 0;
                                    checked: is_count_down;
                                    toggled => {
                                        is_count_down = self.checked;
                                        reset();
                                        set_count_down(is_count_down, hour, minute, second);
                                    }
                                }
                            }
                        }

                        VerticalLayout {
                            alignment: center;
                            TimeInput {
                                width: 240px;
                                enable: is_count_down;
                                hour: root.hour;
                                minute: root.minute;
                                second: root.second;
                                set_time => {
                                    root.hour = self.hour;
                                    root.minute = self.minute;
                                    root.second = self.second;
                                    reset();
                                    set_count_down(is_count_down, hour, minute, second);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

export { AppWindow }